

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>华科大交易溯源系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>上传组件</cite></a>
      <a><cite>功能演示二</cite></a>
    </div>
  </div>


  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card" >
          <div class="layui-card-header">上传溯源材料至区块链, 溯源码可以扫描二维码后复制粘贴; [联盟币后续可用于兑换货币]</div>
          <div class="layui-card-body" >
            <div class="layui-form" style="height: 580px;margin-top: 10px">
              <div class="layui-form-item">
                <label class="layui-form-label">商品唯一溯源码</label>
                <div class="layui-input-block">
                  <input type="text" id="uid"  placeholder="请输入溯源码"
                         autocomplete="off" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">产品状态</label>
                <div class="layui-input-block">
                <select name="city" lay-verify="" id="status">
                  <option value="已到达" selected >已到达</option>
<!--                  <option value="丢失" >丢失</option>-->
<!--                  <option value="损坏" >损坏</option>-->
                </select>
                </div>
              </div>

              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">节点位置</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" id="individual" th:value="${locate}" disabled="disabled">
                </div>
              </div>

              <div class="layui-inline">
                <label class="layui-form-label">入库时间</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" id="indate" placeholder="yyyy-MM-dd">
                </div>
              </div>

              <div class="layui-inline">
                <label class="layui-form-label">出库时间</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" id="outdate" placeholder="yyyy-MM-dd">
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-block"></div>
                <label class="layui-form-label">上传文件</label>
                <div class="layui-input-inline uploadHeadImage">
                  <div class="layui-upload-drag" id="uploadFile" >
                    <i class="layui-icon" ></i>
                    <p>点击上传文件，或将文件拖拽到此处！支持zip、rar</p>
                  </div>
                </div>
                <div class="layui-input-inline">
                  <div id="uploadResult" class="layui-upload-list">

                  </div>
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" id="commit" lay-submit lay-filter="formDemo">立即提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </div>


          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="../../../layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'upload','form','laydate'], function(){
    var laydate = layui.laydate;
    var $ = layui.jquery,
    form = layui.form,
    upload = layui.upload;


    //常规用法
    laydate.render({
      elem: '#indate',
    });
    laydate.render({
      elem: '#outdate',
    });
    upload.render({
      elem: '#uploadFile'
      , url: '/upload'
      , size: 1024 * 50
      , accept: 'file'
      , exts: 'zip|rar' //只允许上传压缩文件
      , auto: false
      , bindAction: '#commit'
      , before: function () {
        let desc = [];
        desc.push($('#status').val());
        desc.push($("#individual").val());
        desc.push($("#indate").val());
        desc.push($("#outdate").val());
        desc = desc.join(',');
        console.log(desc);
        this.data = {
          uid: $('#uid').val(),
          desc: desc
        };

        var index = layer.msg('上传中..', {
          icon: 16
          , shade: 0.5
          , time: false
        });

      }
      , done: function (res, index, upload) {
        layer.close(index);
        if (res.code == 0) {
          layer.msg("上传成功",{icon: 1,time:1000},function () {
            layer.alert(res.msg);
          });
        } else
          layer.msg(res.msg,{icon: 2});
      }

    });

  });
  </script>
</body>
</html>